"use client"

import Image from "next/image"
import { Button } from "@/components/ui/button"
import type { CartItem } from "@/types"
import { Plus, Minus, Trash2 } from "lucide-react"

interface CartItemProps {
  item: CartItem
  onUpdateQuantity: (id: string, quantity: number) => void
  onRemove: (id: string) => void
}

export function CartItemComponent({ item, onUpdateQuantity, onRemove }: CartItemProps) {
  const handleIncrement = () => {
    onUpdateQuantity(item.id, item.quantity + 1)
  }

  const handleDecrement = () => {
    if (item.quantity > 1) {
      onUpdateQuantity(item.id, item.quantity - 1)
    }
  }

  const handleRemove = () => {
    onRemove(item.id)
  }

  return (
    <div className="flex items-center gap-3 p-3 bg-card rounded-lg border border-border">
      <div className="relative w-16 h-16 rounded-lg overflow-hidden bg-muted flex-shrink-0">
        <Image src={item.image || "/placeholder.svg"} alt={item.name} fill className="object-cover" sizes="64px" />
      </div>

      <div className="flex-1 min-w-0">
        <h3 className="font-medium text-sm leading-tight truncate">{item.name}</h3>
        <p className="text-xs text-muted-foreground mt-1">¥{item.price.toFixed(1)} / 份</p>
        <p className="text-sm font-semibold text-primary mt-1">¥{(item.price * item.quantity).toFixed(2)}</p>
      </div>

      <div className="flex items-center gap-2 flex-shrink-0">
        <div className="flex items-center border border-border rounded-lg">
          <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-muted" onClick={handleDecrement}>
            <Minus className="h-3 w-3" />
          </Button>

          <span className="w-8 text-center text-sm font-medium">{item.quantity}</span>

          <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-muted" onClick={handleIncrement}>
            <Plus className="h-3 w-3" />
          </Button>
        </div>

        <Button
          variant="ghost"
          size="sm"
          className="h-8 w-8 p-0 text-destructive hover:bg-destructive/10"
          onClick={handleRemove}
        >
          <Trash2 className="h-3 w-3" />
        </Button>
      </div>
    </div>
  )
}
